import React from 'react'
import ReactDOM from 'react-dom'
import './css/Time.css' 
import DateSelector from 'mob-date-selector'
import 'mob-date-selector/index.css' 
const dateFormat = "YYYY-MM-DD HH:mm:ss"; //时间格式 
class Time extends React.Component {
    constructor (props) {
        super(props)
        this.state = {
          areaPanel : 'none',
          beginDisplay : 'none',
          endDisplay : 'none',
          selectIndex : 1
        }
    }
    theme = ' default'; //主题
    config = { //配置
        width : 350,
        height : 500,
        direction : 'top',
        speed : 2,
        state : false,
        bTime : '',
        eTime : '',
        is_hm:0,//要时分
    }
    condition = {
        bTime : '',
        eTime : '',
        address  : ''
    }
    boxH = 667;
    boxW = 375;
    areaMassage = [];
    selectIndex = 1;
    componentWillMount = () => {
        this.boxW = document.documentElement.clientWidth  || document.body.clientWidth;
        this.boxH = document.documentElement.clientHeight || document.body.clientHeight;
        if(this.props.theme !== undefined) this.theme = this.props.theme; 
        if(this.props.config !== undefined) this.config = Object.assign(this.config,this.props.config);
        this.condition.bTime = this.config.bTime;
        this.condition.eTime = this.config.eTime;
    }
    componentDidMount = () => {
        let is_hmPar ={   type : 1,   param : [1,1,1,1,1]  }
        if(this.config.is_hm==1){////不要时分
            is_hmPar ={   type : 1,   param : [1,1,1,0,0]  }
        }
        setTimeout(() => {
            new DateSelector({
                input : 'beginWaterTime',
                container : 'beginWaterTimeContainer',
                type : is_hmPar.type,
                param : is_hmPar.param,
                beginTime : [],
                endTime : [],
                recentTime : [],
                success : (arr) => { //YYYY-MM-DD HH:mm:ss
                     setTimeout(( )=>{ 
                    let YYYY = arr[0];
                    let MM = (arr[1] < 10) ? '0' + arr[1] : arr[1];
                    let DD = (arr[2] < 10) ? '0' + arr[2] : arr[2];
                    let HH = (arr[3] < 10) ? '0' + arr[3] : arr[3];
                    let mm = (arr[4] < 10) ? '0' + arr[4] : arr[4]; 
                    if(this.config.is_hm==1){////不要时分
                        this.condition.bTime =  YYYY + '-' + MM + '-' + DD ;
                    }else{
                        this.condition.bTime =  YYYY + '-' + MM + '-' + DD + ' ' + HH + ':' + mm; 
                    }
                    this.setState({beginDisplay : 'none'});
                      },200) 
                }
            });
            new DateSelector({
                input : 'endWaterTime',
                container : 'endWaterTimeContainer',
                type : is_hmPar.type,
                param : is_hmPar.param,
                beginTime : [],
                endTime : [],
                recentTime : [],
                success : (arr) => { 
                       setTimeout(( )=>{ 
                          let YYYY = arr[0];
                            let MM = (arr[1] < 10) ? '0' + arr[1] : arr[1];
                            let DD = (arr[2] < 10) ? '0' + arr[2] : arr[2];
                            let HH = (arr[3] < 10) ? '0' + arr[3] : arr[3];
                            let mm = (arr[4] < 10) ? '0' + arr[4] : arr[4]; 
                            if(this.config.is_hm==1){////不要时分
                                this.condition.eTime =  YYYY + '-' + MM + '-' + DD ;
                            }else{
                                this.condition.eTime =  YYYY + '-' + MM + '-' + DD + ' ' + HH + ':' + mm; 
                            } 
                            this.setState({endDisplay : 'none'});
                     },200) 
                }
            });
        },600)
    }
    //设置大小
    setSize = (data) => {
        this.config = Object.assign(this.config,data);
        this.setState();
    }  
    //查询
    search = () => {
        this.props.search(this.condition); 
    }
    //关闭时间查询
    closeSearchPanel = () => {
        this.props.closeSearchPanel();
    }
    render () { 
        return (
            <div className = {this.theme } style = {{height: this.config.height,width: this.config.width,backgroundColor:'#D6EBFF'}}>
                <div className = 'condition_body' style = {{width: this.config.width, }}>
                    <div style = {{width: this.config.width -60 ,paddingRight:'10px'}}>
                         <div className = 'beginTime_wrap time_wrap'>
                            <span>开始时间：</span>
                            <label id="beginWaterTime" onClick = {() => this.setState({beginDisplay : 'block'})} style = {{width:this.config.width -60-10-80}} >{this.condition.bTime}</label>
                            <div id="beginWaterTimeContainer" style = {{display : this.state.beginDisplay}}></div>
                        </div>
                        <div className = 'endTime_wrap time_wrap'>
                            <span>结束时间：</span>
                            <label id="endWaterTime"  onClick = {() => this.setState({endDisplay : 'block'})}  style = {{width:this.config.width -60-10-80}} >{this.condition.eTime}</label>
                            <div id="endWaterTimeContainer" style = {{display : this.state.endDisplay}}></div>
                        </div> 
                    </div> 
                    <div className = 'btn_wrap'>
                        <div className = 'btn_qd' onClick = {() => this.search()}><span>查询</span></div> 
                    </div>
                </div> 
            </div>
        )
    }
}

export default Time
